<template>
    <div class="right-aside">
        <img class="search-icon" src="@/assets/appraise/icon/appraise_select.png" />
        <el-input v-model="search_name" class="search" @change="handleSearch" placeholder="请输入部门、人员" />
        <div class="p-20-14-8">
            <div @click="float_list_copy.is_unfold = !float_list_copy.is_unfold" class="float-head">
                <div>
                    <img class="float-head-img m-r-7" :src="float_list_copy.is_unfold ? xiala_url : xiala_lift_url" />
                    <span class="float-head-f">{{ float_list_copy.label }}</span>
                </div>
            </div>
            <div
                v-show="float_list_copy.is_unfold"
                v-for="(item_child_name, index_child_name) in float_list_copy.children"
                :key="index_child_name"
            >
                <div class="float-man">
                    <div class="float-man-l">
                        <img
                            @click.stop="handleChildUnfold(index_child_name)"
                            class="float-head-img m-r-7"
                            :src="item_child_name.is_unfold ? xiala_url : xiala_lift_url"
                        />
                        <img class="float-man-l-img" src="@/assets/appraise/icon/appraise_bumen.png" />
                        <div @click.stop="handleDuty(item_child_name.id, item_child_name.pid, 0)" class="float-man-l-t">
                            {{ item_child_name.label }}
                        </div>
                    </div>
                </div>
                <div
                    class="float-man m-l-56"
                    v-show="item_child_name.is_unfold"
                    v-for="(item_man, index_man) in item_child_name.children"
                    :key="index_man"
                >
                    <div class="float-man-l">
                        <div v-if="!item_man.url" class="float-man-l-img">
                            {{ item_man.label.substring(item_man.label.length - 2) }}
                        </div>
                        <img v-if="item_child_name.url" class="float-man-l-img" :src="item_child_name.url" />
                        <div class="float-man-l-t" @click.stop="handleDuty(item_man.id, item_child_name.pid, 1)">{{ item_man.label }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="is_hide" class="button-top" @click="handleTop">
            <img class="w-h-100" src="@/assets/appraise/icon/appraise_button_top.png" />
        </div>
    </div>
</template>

<script>
import { syncRequest } from '@/utils/httpRequet'

export default {
    name: 'DepartmentBook',
    props: {
        float_list: {
            type: Object,
            default: () => ({})
        },
        is_hide: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            xiala_url: require('@/assets/appraise/icon/appraise_xiala.png'),
            xiala_lift_url: require('@/assets/appraise/icon/appraise_xiala_left.png'),
            search_name: '', //搜索字段
            float_list_copy: {}
        }
    },
    watch: {
        float_list(val) {
            this.float_list_copy = val
        }
    },
    mounted() {},
    methods: {
        /**
         * @name 搜索
         */
        handleSearch() {
            if (this.search_name) {
                let query_dept_user = syncRequest({
                    url: 'queryDeptUserTree',
                    data: {
                        orgId: '',
                        name: this.search_name
                    }
                })
                this.float_list_copy = query_dept_user.data[0]
                if (query_dept_user.errorCode === '1') {
                    this.$set(this.float_list_copy, 'is_unfold', true)
                    this.float_list_copy.children.forEach(res => {
                        this.$set(res, 'is_unfold', true)
                    })
                }
            } else {
                this.float_list_copy = this.float_list
            }
        },
        /**
         * @name 展开子列表
         * @param de_index 部门索引值
         * @param per_index  人员索引值
         */
        handleChildUnfold(per_index) {
            this.float_list_copy.children[per_index].is_unfold = !this.float_list_copy.children[per_index].is_unfold
        },
        /**
         * @name 人员或部门职责
         */
        handleDuty(id, pid, type) {
            this.$emit('handleDuty', { id, pid, type })
        },
        /**
         * @name 置顶
         */
        handleTop() {
            this.$emit('handleTop')
        }
    }
}
</script>

<style scoped>
.right-aside {
    width: 100%;
    height: 100%;
    min-width: 84px;
    padding: 14px;
    margin: 14px 0 14px 0;
    background-color: #ffffff;
    position: relative;
    overflow: scroll;
}
.p-20-14-8 {
    padding: 20px 14px 8px;
}
.m-r-7 {
    margin-right: 7px;
}
.m-l-56 {
    margin-left: 56px;
}
.w-h-100 {
    width: 100%;
    height: 100%;
}
.search {
    width: 100%;
    border: 1px solid rgba(248, 248, 248, 1);
    background-color: rgba(252, 252, 252, 1);
}

.search >>> .el-input__inner {
    padding: 0 30px;
}
.search-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 28px;
    top: 25px;
    z-index: 999;
}

.float-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.float-head-img {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.float-head-f {
    font-size: 16px;
    cursor: pointer;
}

.float-man {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding-left: 15px;
}

.float-man-l {
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.float-man-l-t {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.float-man-l-img {
    user-select: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 7px;
    font-size: 14px;
    color: #ffffff;
    background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
    box-shadow: 0 4px 6px 0 rgba(209, 209, 209, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-top {
    width: 58px;
    height: 58px;
    position: fixed;
    bottom: 8px;
    right: 8px;
}
@media (max-width: 1024px) {
    /*.right-aside {*/
    /*  width: 184px;*/
    /*}*/

    .float-head-img {
        width: 11px;
        height: 11px;
    }

    .float-head-f {
        font-size: 8px;
    }

    .button-top {
        width: 58px;
        height: 58px;
        position: fixed;
        bottom: 8px;
        left: 8px;
    }
}
</style>
